<template>
	<view>
		<!-- tabbar对应页面 -->
		<home v-if="curPage==1" />
		<jobs v-else-if="curPage==2" />
		<housetribe v-else-if="curPage==3" />
		<news v-else-if="curPage==4"/>
		<user v-else-if="curPage==5"/>
		<!-- 自定义tabBar -->
		<view class="tabBarBox">
			<!-- tab-1 -->
			<view class="tabItem" hover-class="none" @tap="toHome">
				<view class="icon">
					<view v-if="curPage==1"  class="iconfont fc-mc fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab1_active.png"></image>
					
					</view>
					<view v-else  class="iconfont seleicon fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab1.png"></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage==1?sTextColor:textColor }">首页</view>				
			</view>
			<!-- tab-2 -->
			<view class="tabItem" hover-class="none" @tap="toJob">
				<view class="icon">					
					<view v-if="curPage==2"  class="iconfont fc-mc fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab2_active.gif"></image>
					</view>
					<view v-else  class="iconfont seleicon fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab2.png"></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage==2?sTextColor:textColor }">求职</view>				
			</view>
			<!-- midBtn midBtn-->
			<view class="tabItem" hover-class="none" @tap="midBtn">
				<view class="icon">					
					<view v-if="curPage==3"  class="iconfont fc-mc fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab3_active.gif"></image>
					</view>
					<view v-else  class="iconfont seleicon fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab3.png"></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage==3?sTextColor:textColor }">宅部落</view>				
			</view>
			<!-- tab-3 -->
			<view class="tabItem" hover-class="none" @tap="toNews">
				<view class="icon">
					<view v-if="curPage==4"  class="iconfont fc-mc fs-50">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab4_active.gif"></image>
					</view>
					<view v-else  class="iconfont seleicon fs-50">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab4.png"></image>
					</view>
				</view>
				<view class="text pad-top-6" :style="{ color: curPage==4?sTextColor:textColor }">消息</view>				
			</view>
			<!-- tab-4 -->
			<view class="tabItem" hover-class="none" @tap="toMine">
				<view class="icon">
					<view v-if="curPage==5"  class="iconfont fc-mc fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab5_active.gif"></image>
					</view>
					<view v-else  class="iconfont seleicon fs-56">
						<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab5.png"></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage==5?sTextColor:textColor }">我的</view>				
			</view>
		</view>
	</view>
</template>
<script>
	import home from '@/pages/index/index';
	import jobs from '@/pages/index/job.vue';
	import housetribe from '@/pages/index/houseTribe';
	import news from '@/pages/index/chat';
	import user from '@/pages/index/user';
	export default {
		components: {
			home,jobs,housetribe,news,user
		},
		data() {
			return {
				//当前页
				curPage: 1,
				//字体颜色
				textColor: '#666',
				//选中字体颜色
				sTextColor: '#84C0F4',
				code: '',
				user_info:[],
				true_name:'',
				access_token: uni.getStorageSync('token'),
				mobile:uni.getStorageSync('mobile'),//手机号
				user_type : uni.getStorageSync('user_type'),//用户类型
				usertype:'',
				userId:uni.getStorageSync('wxuser_id'),
			};
		},
		onHide() {
			
		},
		onLoad(option) {			
			 if(option.curPage){
				this.curPage = option.curPage
			 }
		},
		mounted() {
			console.log()
			//显示分享按钮
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {				
			return {
				title: '宿求直聘', // 标题
				path: 'components/index/tabbar?id='+this.userId, // 分享路径
				/* imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg', // 分享图
				desc: '小程序描述描述描述描述', */
				success: res => {
					//console.log(res)
				},
			};
		},
		//朋友圈
		onShareTimeline(res) {
			console.log('分享朋友圈返回值', res);
			return {
				title: '宿求直聘',
				path: 'components/index/tabbar?id='+this.userId, // 分享路径
				success: res => {
					//console.log(res)
				},
			};
		},
		methods: {			
			toHome() {	
				this.curPage = 1;
				uni.setNavigationBarTitle({
				　　title:'首页'
				})				
			},
			toJob() {				
				this.curPage = 2
				uni.setNavigationBarTitle({
				　　title:'求职'
				})
			},
			midBtn() {
				this.curPage = 3
				uni.setNavigationBarTitle({
				　　title:'宅部落'
				})
			},
			toNews() {			
				this.curPage = 4
				uni.setNavigationBarTitle({
				　　title:'消息'
				})
			},
			toMine() {
				this.curPage = 5
				uni.setNavigationBarTitle({
				　　title:'我的'
				})
			}
		}
	}
</script>

<style lang="scss">
	.fs-46{		
		font-size: 46rpx;
	}
	.fs-50{
		font-size: 48rpx;
	}
	.fs-56{
		font-size: 54rpx;
	}
	.fc-b2{
		color: #B2B2B2;
	}
	.pad-top-6{
		padding-top: 6rpx;
	}
	.icon-saoyisao{
		color: #fff !important;
		position: absolute;
		top: 25rpx;
		left: -1px;
		right: 0;
		font-size: 50rpx!important;
		text-align: center;
	}
	.seleicon{
		color: #D8D8D8!important;
	}
	.tabBarBox {
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		border-top: 1px solid #f5f5f5;
		.tabItem {
			padding:0;
			flex: 1;
			text-align: center;

			.text {
				font-size: 20rpx;
				color: #666;
			}
			.icon {
				image {
					width: 27px;
					height: 28px;
					position: relative;
					top: 10rpx;
				}
			}
		}
		.tabItem_h {
			background-color: rgba($color: #F7F5F5, $alpha: .6);
		}
		/* 中间凸起按钮 */
		.midBtn {
			flex: 1;
			text-align: center;
			position: relative;				
			.scan-style{
				position: relative;
				top: -38rpx;
				font-size:28rpx;
				color: #b2b2b2;
				left: 1px;
			}
			.icon {
				.image {
					display: block;
					width:100rpx;
					height: 100rpx;
					position: relative;
					bottom: 36rpx;
					background-color: #50BE91;
					border-radius: 50%;
					box-shadow: 2rpx 0rpx 12rpx #50BE91;
					margin: 0 auto;
				}
			}
		}
	}
</style>
